<template>
  <div class="app-container">
    <h1>App2 组件</h1>
    <hr />
<!--      <a href="#/home">首页</a>-->
<!--      <a href="#/movie">电影</a>-->
<!--      <a href="#/about">关于</a>-->

<!--      <router-link to="/home">首页</router-link>-->
<!--      <router-link to="/movie">电影</router-link>-->
<!--      <router-link to="/about">关于</router-link>-->

<!--          注意1： 在hash中，/ 后面的参数项，叫做路径参数
              在路由参数对象中，需要使用this.$route.params来访问路径参数
              注意2：在hash地址中，？后面的参数项，叫做查询参数
              在路由参数对象中，需要使用this.$route.query来访问查询参数
              注意3：在this.$route中，path只是路径部分，fullPath是完整的地址，
              例如：  /movie/2?name=zs&age=22 是fullPath的值
              /movie/2是path的值
-->
            <router-link to="/home">首页</router-link>
            <router-link to="/movie/1">西游记</router-link>
            <router-link to="/movie/2?name=zs&age=18">红楼梦</router-link>
            <router-link to="/movie/3">三国演义</router-link>
            <router-link to="/about">关于</router-link>

<!--      占位符，展示需要展示的组件-->
      <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style lang="less" scoped>
.app-container {
  background-color: #efefef;
  overflow: hidden;
  margin: 10px;
  padding: 15px;
  > a {
    margin-right: 10px;
  }
}
</style>
